<template>
	<div  class="login-container">
	  <div class="login_box">
		  <div class="avatar_box">
			  <img src="../assets/logo.png"  alt="logo" />
		  </div>
		  <el-form class="login-form" :model="loginForm" :rules="rules" ref="loginForm">
		    <el-form-item  prop="username">
		      <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
		    </el-form-item>
			<el-form-item prop="password">
			  <el-input v-model="loginForm.password" prefix-icon="el-icon-user-solid" type="password"></el-input>
			</el-form-item>
			<el-form-item class="btns">
				<el-button type="primary" @click="submitForm('loginForm')" >登录</el-button>
				<el-button type="info" @click="resetForm('loginForm')">重置</el-button>
			</el-form-item>
		 </el-form>
		 
	  </div>
	</div>
</template>

<script>
export default{
	data(){
		return{
			loginForm:{
				username:'',
				password:''
			},
			  rules:{
				    username: [
				       { required: true, message: '请输入登录名', trigger: 'blur' },
				       { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
				      ],
					  password:[
						{ required: true, message: '请输入密码', trigger: 'blur' },
					    { min: 6, max: 15, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					  ]
						  
		   }
		      };
		    },
 methods: {
      submitForm(formName) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
           const {data:res}=await this.$http.post('login',this.loginForm)
		   if(res.meta.status==200){
			   this.$message.success('登录成功');
		       window.sessionStorage.setItem("token",res.data.token)
			   
			   this.$router.push("/home")
		   }else{
			   this.$message.error("登录失败")
		   }
          } else {
            console.log('error submit!!');
            return false;
			}
          });
        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
	
}
</script>
<style >
	.login-container{
		background-color: #2B4B6B;
		height: 100%;
	}
	 .login_box{
		 background-color: #fff;
		 width: 450px;
		 height: 350px;
		 border-radius: 3px;
		 position: absolute;
		 left: 50%;
		 top: 50%;
		 transform: translate(-50%,-50%);
		 border-radius: 5px;
	 }
	 .avatar_box{
		height: 130px;
		width: 130px;
	    border: 1px solid #eee;
		border-radius: 50%;
        border-show:0 0 10px #ddd;
		position: absolute;
	    left: 50%;
		transform: translate(-50%,-50%);
		background-color: #FFFFFF;
	 }
	 .avatar_box img{
		 width: 100%;
		 height: 100%;
		 border-radius: 50%;
		 background-color: #EEEEEE;
	
	 }
	 .btns{
		 display: flex;
		 justify-content: flex-end;
	 }
	 .login-form{
		 position: absolute;
		 bottom: 10px;
		 width: 100%;
		 padding: 0 20px;
		 box-sizing: border-box;
		 
	}
</style>